<template >
    <div class="icons">
        <swiper :options="swiperOption" >
        
            <swiper-slide v-for='item in page' :key='item.id'>
                <div class='icons-item' v-for='page in item' :key='page.id'>
                    <img :src="page.imgUrl"  >
                    <p>{{page.title}}</p>
                </div>
            </swiper-slide>

            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template >

<script>
    
    export default {
        props:['iconList'],
        data(){
                return{
                    
                    swiperOption:{
                        pagination: {
                            el: '.swiper-pagination'
                            
                        },
                        loop:true
                    }
                }
            },

            computed:{
                    page(){
                        let pages=[];
                        this.iconList.forEach((item,index)=>{
                            let idx=Math.floor(index/8);
                            if(!pages[idx])pages[idx]=[];
                            pages[idx].push(item)
                        })
                        return pages;
                    }
            }
    }
</script>

<style scoped lang="stylus" >
    .icons{
        width 100% 
        overflow hidden
        background-color #fff
    }
    .icons .icons-item{
        width:25%;
        height :0;
        padding-bottom:25%;
        float left
    }
    .icons .icons-item img{
        width:1.1rem;
        height:1.1rem;
        background-color:#333;
        display:block;
        margin:0 auto;
    }
    .icons .icons-item p{
        margin-top :.1rem;
        font-size :.28rem;
        color :#212121;
        text-align: center;
    }
</style>

   